<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery1">
        <a-row :gutter="24">
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <a-form-item label="所属机构">
              <a-select allowClear defaultValue="1" v-model="queryParam.orgIds" showSearch :filter-option="filterOption"
                :not-found-content="null">
                <a-select-option v-for="item in orgList" :key="item.id" :value="item.id">
                  {{ item.departName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <a-form-item label="品牌">
              <a-select allowClear defaultValue="1" v-model="queryParam.brandCode" showSearch
                :filter-option="filterOption" :not-found-content="null">
                <a-select-option v-for="item in brandList" :key="item.id" :value="item.brandCode">
                  {{ item.brandName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <a-form-item label="编码">
              <a-input placeholder="" v-model="queryParam.itemCode" allowClear></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <a-form-item label="名称">
              <a-input placeholder="" v-model="queryParam.itemName" allowClear></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="5" :lg="7" :md="8" :sm="24">
            <a-form-item label="零售价格">
              <!-- <a-input-number v-model="queryParam.price" style="width: 100%"></a-input-number> -->
              <a-input-group compact>
                <template v-if="inputType == 'between'">
                  <a-input-number style="width: 100px; text-align: center" :min="0" placeholder="最小值"
                    v-model="queryParam.beginPrice" allowClear />
                  <a-input style="width: 30px; border-left: 0; pointer-events: none; backgroundcolor: #fff"
                    placeholder="~" disabled />
                  <a-input-number :min="0" style="width: 100px; text-align: center; border-left: 0" placeholder="最大值"
                    v-model="queryParam.endPrice" allowClear />
                </template>
              </a-input-group>
            </a-form-item>
          </a-col>
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <a-form-item label="价格尾数">
              <a-select v-model="queryParam.priceTail" allowClear>
                <a-select-option v-for="(item, index) in priceTail" :key="index" :value="item.value">
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <a-form-item label="季节">
              <a-select v-model="queryParam.itemSession" allowClear>
                <a-select-option v-for="(item, index) in itemSession" :key="index" :value="item.value">
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <a-form-item label="类型">
              <a-select v-model="queryParam.itemType" allowClear>
                <a-select-option v-for="(item, index) in itemType" :key="index" :value="item.value">
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <a-form-item label="上架时间">
              <a-range-picker
                :ranges="{ 今天: [moment(), moment()], 本月: [moment().startOf('month'), moment().endOf('month')] }"
                v-model="shelevsDateRange" @change="handleChange" />
            </a-form-item>
          </a-col>
          <!-- <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="参加活动">
              <a-select v-model="queryParam.actFlag" allowClear>
                <a-select-option v-for="(item, index) in yesNoState" :key="index" :value="item.value">
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="参加积分">
              <a-select v-model="queryParam.pointsFlag" allowClear>
                <a-select-option v-for="(item, index) in yesNoState" :key="index" :value="item.value">
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col> -->
          <a-col :xl="3" :lg="7" :md="8" :sm="24">
            <a-form-item label="状态">
              <a-select v-model="queryParam.pStatus" allowClear>
                <a-select-option v-for="(item, index) in pStatus" :key="index" :value="item.value">
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <a-form-item label="买手">
              <a-input placeholder="" v-model="queryParam.buyer" allowClear></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <a-form-item label="供应商">
              <a-input placeholder="" v-model="queryParam.supplier" allowClear></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <a-form-item label="上市年份">
              <a-select v-model="queryParam.itemYear" allowClear>
                <a-select-option v-for="(item, index) in years" :key="index" :value="item.value">
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>


          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery1" icon="search">查询</a-button>
              <a-button type="default" @click="searchReset1" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <!-- <div class="table-operator">
      <a-dropdown :disabled="selectedRowKeys.length == 0" >
        <a-menu slot="overlay">
          <a-menu-item-group title="活动">
            <a-menu-item key="11" @click="updateSpuSetting(11)"><a-icon type="setting" />参与活动</a-menu-item>
            <a-menu-item key="10" @click="updateSpuSetting(10)"><a-icon type="setting" />不参与活动</a-menu-item>
          </a-menu-item-group>
          <a-menu-item-group title="积分">
            <a-menu-item key="21" @click="updateSpuSetting(21)"><a-icon type="setting" />参与积分</a-menu-item>
            <a-menu-item key="20" @click="updateSpuSetting(20)"><a-icon type="setting" />不参与积分</a-menu-item>
          </a-menu-item-group>
          <a-menu-item-group title="同时设置">
            <a-menu-item key="31" @click="updateSpuSetting(31)"><a-icon type="setting" />参与活动和积分</a-menu-item>
            <a-menu-item key="30" @click="updateSpuSetting(30)"><a-icon type="setting" />不参与活动和积分</a-menu-item>
          </a-menu-item-group>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
      </a-dropdown>
    </div> -->

    <!-- table区域-begin -->
    <div>
      <!-- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
        <a style="font-weight: 600">{{ selectedRowKeys.length }}</a
        >项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div> -->
      <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource"
        :pagination="ipagination" :loading="loading" class="j-table-force-nowrap" @change="handleTableChange">
        <span slot="action" slot-scope="text, record">
          <!-- <a @click="handleEdit(record)">详情</a> -->
        </span>
        <span slot="pstatus" slot-scope="text, record">
          <span v-if="text === 1">上架</span>
          <span v-else>下架</span>
        </span>
        <span slot="photo" slot-scope="text, record">
          <a-avatar shape="square" :src="text + '?x-oss-process=image/resize,w_50,h_50'"
            @click="text ? previewImgObject([text]) : () => { }"></a-avatar>
        </span>
      </a-table>
    </div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <supplyProductSpu-modal ref="modalForm" @ok="modalFormOk"></supplyProductSpu-modal>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import SupplyProductSpuModal from './modules/SupplyProductSpuModal'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import moment from 'moment'
import { postAction } from '@/api/manage'
import { queryMerchantBussList } from '@/api/api'
import { previewImgObject } from '@/utils/util'


export default {
  name: 'SupplyProductSpuList',
  mixins: [JeecgListMixin],
  components: {
    SupplyProductSpuModal
  },
  data() {
    return {
      disableMixinCreated: true,
      moment,
      inputType: 'between',
      orgList: [],
      shelevsDateRange: [],
      previewImgObject,
      itemSession: [
        { text: '春', value: '春' },
        { text: '夏', value: '夏' },
        { text: '秋', value: '秋' },
        { text: '冬', value: '冬' },
        { text: '未知', value: '未知' },
      ],
      itemType: [
        { text: '正价', value: '正价' },
        { text: '砍货', value: '砍货' },
        { text: '代卖', value: '代卖' },
      ],
      priceTail: [
        { text: '0', value: '0' },
        { text: '1', value: '1' },
        { text: '2', value: '2' },
        { text: '3', value: '3' },
        { text: '4', value: '4' },
        { text: '5', value: '5' },
        { text: '6', value: '6' },
        { text: '7', value: '7' },
        { text: '8', value: '8' },
        { text: '9', value: '9' },
      ],
      yesNoState: [
        { text: '是', value: '1' },
        { text: '否', value: '0' },
      ],
      pStatus: [
        { text: '上架', value: '1' },
        { text: '下架', value: '0' },
      ],
      brandList: [
      ],
      years: [],
      description: '产品管理管理页面',
      // 表头
      columns: [
        {
          title: '所属机构',
          align: 'center',
          dataIndex: 'orgName',
        },
        {
          title: '商品编码',
          align: 'center',
          dataIndex: 'itemCode',
        },
        {
          title: '产品主图',
          align: 'center',
          dataIndex: 'photo',
          scopedSlots: { customRender: 'photo' },
        },
        {
          title: '商品名称',
          align: 'center',
          dataIndex: 'itemName',
        },
        {
          title: '季节',
          align: 'center',
          dataIndex: 'itemSession',
        },
        {
          title: '类型',
          align: 'center',
          dataIndex: 'itemType',
        },
        {
          title: '所属分类',
          align: 'center',
          dataIndex: 'itemCateName',
        },
        {
          title: '供应价',
          align: 'center',
          dataIndex: 'supplyPrice',
          sorter: true,
        },
        {
          title: '零售价',
          align: 'center',
          dataIndex: 'markPrice',
          sorter: true,
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'pstatus',
          scopedSlots: { customRender: 'pstatus' },
        },
        {
          title: '上架时间',
          align: 'center',
          dataIndex: 'createTime',
        },
        {
          title: '品牌',
          align: 'center',
          dataIndex: 'brandName'
        },
        {
          title: '买手',
          align: 'center',
          dataIndex: 'buyer'
        },
        {
          title: '供应商',
          align: 'center',
          dataIndex: 'supplier'
        },
        {
          title: '上市年份',
          align: 'center',
          dataIndex: 'itemYear'
        },
        // {
        //   title: '参与活动',
        //   align: 'center',
        //   dataIndex: 'actFlag',
        //   customRender: (text) => {
        //     return text == 1 ? '是' : '否'
        //   },
        // },
        // {
        //   title: '参与积分',
        //   align: 'center',
        //   dataIndex: 'pointsFlag',
        //   customRender: (text) => {
        //     return text == 1 ? '是' : '否'
        //   },
        // },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
      url: {
        list: '/stock/supplyProductSpu/list',
        shopListUrl: '/sys/sysDepart/getMyDepartList',
        setting: '/stock/supplyProductSpu/setting',
      },
    }
  },
  computed: {},
  created() {
    this.queryParam.pStatus = '1'
    this.loadShopList()
    this.yearChange()
    this.loadBrandList()
  },
  methods: {
    searchQuery1() {
      let orgIds = this.queryParam.orgIds
      if (!orgIds) {
        this.$message.warning('请选择机构再查询')
        return
      }
      this.loadData()
    },
    searchReset1() {
      let orgIds = this.queryParam.orgIds
      this.queryParam = {}
      this.$set(this.queryParam, 'orgIds', orgIds)
      this.searchQuery1()
    },
    loadShopList() {
      this.orgList = []
      postAction(this.url.shopListUrl + '?type=2').then((res) => {
        if (res.success) {
          this.orgList = res.result
          if (this.orgList.length > 0) {
            let orgIds = this.orgList[0].id
            this.$set(this.queryParam, 'orgIds', orgIds)
            console.log("orgids是" + orgIds);
          }
          this.loadData(1)
        }
      })
    },
    loadBrandList() {
      this.brandList = []
      queryMerchantBussList({ 'bussType': 'BRAND' }).then((res) => {
        if (res.success) {
          for (let a of res.result) {
            this.brandList.push({ brandName: a.bussName, brandCode: a.bussCode })
          }
        }
      })
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    handleChange(date, dateString) {
      this.queryParam.beginTime = dateString[0]
      this.queryParam.endTime = dateString[1]
    },
    updateSpuSetting(flag) {
      console.log(this.selectionRows)
      console.log(this.selectedRowKeys)
      this.loading = true
      let param = {
        flag: flag,
        ids: this.selectedRowKeys,
      }
      postAction(this.url.setting, param)
        .then((res) => {
          if (res.success) {
            this.selectedRowKeys = []
            this.selectionRows = []
            this.$message.success('操作成功')
          } else {
            this.$message.warn(res.message)
          }
        })
        .finally(() => (this.loading = false))
    },
    yearChange() {
      var myDate = new Date()
      var year = myDate.getFullYear()

      this.years = []

      for (let i = 0; i < 10; i++) {
        this.years.push({ value: (year - i), text: (year - i) })
      }
    }
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>